<!--
功能：报修组件,
作者：RanSheng,
邮箱：1534677527@qq.com",
时间：2021/5/31 17:29,
版本：v1.0,
修改记录：,
修改内容：,
修改人员：,
修改时间：,
-->
<template>
  <div class="app">
    <div class="app-header">
      <div class="user">
        <div class="user-txt" v-for="u in userTxt" :key="u.id">
          <span class="sp1">{{ u.name }}</span>
          <span class="sp2">{{ u.txt }}</span>
        </div>
      </div>
    </div>
    <div class="app-main">
      <div class="main-add">
        <span @click="add"><i class="el-icon-plus"></i></span>
      </div>
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100% ; height: 100%">
        <el-table-column
          type="index"
          label="编号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="applytime"
          label="日期">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.applytime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="content"
          label="报修内容">
          <template slot-scope="scope">
            <el-input autosize maxlength="20" show-word-limit prefix-icon="el-icon-edit" v-model="scope.row.content"
                      @blur="inputBlue(scope.row.content)" placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="number"
          label="商品数量">
          <template slot-scope="scope">
            <span style="margin-left: 10px" v-if="false">{{ scope.row.date }}</span>
            <el-input-number v-model="scope.row.number" size="small" @change="handleChange(scope.row.number)" :min="1"
                             :max="10" label="描述文字"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              slot="reference"
              @click="handleDel(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="app-over">
      <span class="sp3">这不是我？</span>
      <span class="sp4" @click="addRepairList">报修提交</span>
    </div>
    <div class="app-text">
      <div class="text-header">
        报修须知 :
      </div>
      <div class="text-box">
        <ul>
          <li v-for="t in text" :key="t.id">
            <i :class="t.icon"></i>
            {{ t.txt }}
          </li>
          <li class="li">
            <i class="el-icon-star-on"></i>
            商品标价表
            <i class="el-icon-star-on"></i></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {message} from "@/utils/age";
import {mapState} from "vuex";

export default {
  name: "Repair",
  data() {
    return {
      text: [{
        id: 1,
        txt: '所报物品不可为人为损坏！',
        icon: 'el-icon-warning'
      }, {
        id: 2,
        txt: '如经专业人员检测发现出现认为损坏的情况，可按照宿舍物品损坏条例处理！',
        icon: 'el-icon-warning'
      }, {
        id: 3,
        txt: '宿舍共有物品均为学校所有，如遇见损坏现象请勿私自处理，如私自处理出现的后果，概不负责！',
        icon: 'el-icon-warning'
      }, {
        id: 4,
        txt: '请注意：非共有物品请勿在此处申请提交。',
        icon: 'el-icon-warning'
      }, {
        id: 5,
        txt: '宿舍所管物品均有标价，如需详细了解，可点击下方传送门！',
        icon: 'el-icon-warning'
      }],
      visible: false,
      userTxt: [{
        id: 1,
        name: '姓名：',
        icon: 'el-icon-user',
        txt: '',
      }, {
        id: 2,
        name: '专业：',
        icon: 'el-icon-user',
        txt: ''
      }, {
        id: 3,
        name: '电话：',
        icon: 'el-icon-user',
        txt: ''
      }, {
        id: 4,
        name: '房间号：',
        icon: 'el-icon-user',
        txt: ''
      }, {
        id: 5,
        name: '楼层号：',
        icon: 'el-icon-user',
        txt: ''
      }]
    };
  },
  components: {},
  computed: {
    ...mapState(["tableData", "user"])
  },
  mounted() {
    //  再次判别是否为寝室长 以及查询个人信息操作
    this.$http.get('repair/one').then(response => {
      if (response.data) {
        this.userTxt[0].txt = response.data.name
        this.userTxt[1].txt = response.data.professional
        this.userTxt[2].txt = response.data.phone
        this.userTxt[3].txt = response.data.room.name
        this.userTxt[4].txt = response.data.floor.name
        message("success", "成功")
      }
    }).catch(err => {
      message("error", "请求参数错误")
    })
  },
  methods: {
    addRepairList() {
      if (this.forContent() && this.tableData.length != 0) {
        this.$http.post('repair/add', this.tableData).then(response => {
          if (response.data) {
            message("success", "成功")
            //  清空内容
            this.$store.commit("clearTableDate", [])
          } else {
            message("error", "报修内容为空！")
          }
        }).catch(err => {
          message("error", "请求参数错误")
        })
      } else {
        message("error", "报修内容不可为空")
      }
    },
    inputBlue(data) {
      this.$store.commit("changeTableContent", data)
    },
    handleDel(index, value) {
      this.$confirm('确定要删除内容为【' + value.content + '】的保修表？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.commit("removeTableDate", index)
        message("success", "删除成功")
      }).catch(() => {
        message("info", "已取消删除")
      });

    },
    handleChange(value) {
      this.$store.commit("changeTableNumber", value)
    },
    forContent() {
      //  循环遍历
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].content == '') {
          return false;
        }
      }
      return true
    },
    add() {
      //  添加报修内容
      let length = this.tableData.length
      if (length == 0 || (this.forContent())) {
        let table = {
          id: this.tableData.length + 1,
          uid: this.user.id,
          rid: this.user.room.id,
          fid: this.user.floor.id,
          content: '',
          number: '',
          process: '申请中',
          applytime: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
        }
        this.$store.commit("addTableData", table)
      } else {
        message("warning", "保修内容不可为空！！！")
      }
    }
  },
  watch: {},
  destroyed() {

  },
}
</script>

<style scoped>
.app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*保修须知*/
.app-text {
  margin-top: 20px;
  width: 93%;
  border-top: 2px solid #909399;
  padding-top: 20px;
  min-height: 400px;
}

.text-header {
  font-size: 22px;
  font-weight: 700;
}

.text-box ul li {
  list-style: none;
  font-size: 18px;
  letter-spacing: 2px;
  margin: 10px 0;
  color: #909399;
}

.text-box ul li i {
  color: #000000;
}

.text-box ul .li {
  cursor: pointer;
  color: #db2f00;
}

/**/

/*提交*/
.app-over {
  width: 93%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  height: 80px;
}

.sp3 {
  font-size: 15px;
  color: #909399;
  cursor: pointer;
  font-weight: 700;
  transition: all .3s;
}

.sp3:hover {
  color: #000000;
}

.sp4 {
  width: 120px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .3s;
  background-color: #6E6E6E;
}

.sp4:hover {
  background-color: #F56C6C;
  color: #ffffff;
}

/**/

/*内容*/
.app-main {
  width: 93%;
  margin-top: 40px;
  min-height: 400px;
  position: relative;
}

.app-main /deep/ .el-table th > .cell {
  text-align: center;
}

.app-main /deep/ .el-table .cell {
  text-align: center;
}

.main-add {
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  height: 25px;
  z-index: 100;
  text-align: center;
  line-height: 25px;
  font-size: 20px;
  cursor: pointer;
  color: #ffffff;
  background-color: #6E6E6E;
}


/**/
/*头部*/
.app-header {
  width: 93%;
  font-size: 20px;
  margin-top: 40px;
}

.user {
  display: flex;
  justify-content: space-between;
}

.sp1 {

}

.sp2 {
  color: #4F5053;
}

/**/
</style>
